<template>
  <div class="song-popup" @click="showPopup">
    <div class="content" @click.stop>
      <!-- 标题 -->
      <div class="title">
        <div class="left" @click="setPlayMode">
          <i class="iconfont" :class="playOrder[playMode]"></i>
          <span class="mode">{{ textMode }}</span>
        </div>
        <div class="right">
          <i class="iconfont icon-shanchu"></i>
        </div>
      </div>
      <!-- 歌曲列表 -->
      <ul class="play-list" v-if="plays.length != 0">
        <li
          v-for="(item, index) in plays"
          :key="item.id"
          @click="currentSongClick(index)"
        >
          <div class="left">
            <i
              class="iconfont"
              :class="{ 'icon-bofang': item.title == currentSong.title }"
            ></i>
            <span
              :style="{
                color: item.title == currentSong.title ? '#d44439' : '#bba8a8',
              }"
              >{{ item.title }}</span
            >
          </div>
          <div class="right">
            <!-- 喜欢 -->
            <i class="iconfont" :class="item.like?'icon-xihuan':'icon-xihuan2'" @click="likeClick(item.id)"></i>
            <!-- 删除 -->
            <i
              class="iconfont icon-shanchu"
              @click.stop="delCurrentSong(index)"
            ></i>
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import { mapState, mapGetters } from "vuex";
export default {
  data() {
    return {
      playOrder: ["icon-shunxubofang", "icon-danquxunhuan1", "icon-suiji"],
      textMode: "顺序播放",
      plays:[]
    };
  },
  computed: {
    ...mapState({
      playMode: (state) => state.player.playMode,
      playSongList: (state) => state.player.playSongList,
      likeSong:state=> state.user.likeSong
    }),
    ...mapGetters({
      currentSong: "player/currentSong",
    }),
    // currentPlayList:{
    //   get(){
    //    return JSON.parse(JSON.stringify(this.$store.state.player.playSongList)) 
    //   },
    //   set(val){
    //     this.plays=val
    //   }
    // }
  },
  created(){
    clearInterval(this.time)
    this.time=setInterval(()=>{
      if(this.playSongList.length!=0){
        this.plays=JSON.parse(JSON.stringify(this.playSongList))
        clearInterval(this.time)
      }
    },200)
  },
  watch:{
    playSongList(newVal){
      this.plays=JSON.parse(JSON.stringify(newVal))
      this.likeSong.map(like=>{
        this.plays.map(play=>{
          like.id==play.id&&(play.like=true)
        })
      })
    }
  },
  methods: {
    showPopup() {
      this.$emit("input", false);
    },
    setPlayMode() {
      this.$store.commit("player/setPlayMode");
      switch (this.playMode) {
        case 0:
          this.textMode = "顺序播放";
          break;
        case 1:
          this.textMode = "单曲循环";
          break;
        case 2:
          this.textMode = "随机播放";
          break;
      }
    },
    // 切歌
    currentSongClick(i) {
      let index=this.playSongList.findIndex(item=>item.id==this.plays[i].id)
      this.$store.commit('player/setCurrentIndex',index)
    },
    // 将歌曲在列表中删除
    delCurrentSong(i) {
      this.plays.splice(i,1)
    },
    async likeClick(id){
    }
  },
};
</script>
 
<style lang = "scss" scoped>
@import "@/assets/global-style.scss";
.song-popup {
  position: fixed;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10000;
  .content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 53vh;
    background: #fff;
    border-radius: 10px 10px 0 0;
    padding: 0 20px;
    box-sizing: border-box;
    /* 标题 */
    .title {
      text-align: center;
      font-size: 14px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44px;
      i {
        font-size: 20px;
        color: $theme-color;
      }
      .left {
        display: flex;
        align-items: center;
        span {
          margin-left: 10px;
          color: #333;
        }
      }
      .right {
        margin-right: 10px;
        i {
          font-size: 16px;
        }
      }
    }
    /* 播放列表 */
    .play-list {
      height: calc(53vh - 44px);
      overflow: auto;
      li {
        display: flex;
        align-items: center;
        justify-content: space-between;
        height: 40px;
        line-height: 40px;
        i {
          color: $theme-color;
        }
        .left {
          display: flex;
          align-items: center;
          i {
            width: 20px;
          }
          span {
            margin-left: 6px;
            font-size: 14px;
            color: $font-color-desc-v2;
          }
        }
        .right {
          .icon-xihuan2,.icon-xihuan{
            margin-right: 16px;
          }
        }
      }
    }
  }
}
/* 歌单列表弹出层 */
.slideIn {
  animation: slide-in 10s;
}
.slideOut {
  animation: slide-out 10s;
}
@keyframes slide-in {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes slide-out {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(100%);
  }
}
</style>